{% extends "base.html" %}
{% block title %}图书互借{% endblock %}

{% block card %}
    <div class="layui-card-header"><h2>图书互借</h2></div>
{% endblock %}

{% block button %}
    <!-- 借出书目信息填写 -->
    <div style="position: absolute; top: 52px; right: 20px;">
        <button class="layui-btn layui-btn-lg" style="float:right;margin-top:-50px;margin-right:40px;" id="borrowBtn">
            <i class="layui-icon">&#xe608;</i>我要借出
        </button>
    </div>
{% endblock %}

{% block body %}
    <form class="layui-form" method="post" id="searchForm">
        {{ form.csrf_token }}
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                        {{ form.method(class="layui-input-inline") }}
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">查询内容：</label>
                        <div class="layui-input-inline">
                            {{ form.content(class="layui-input",style="width:250px") }}
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="layui-input-inline">
                            {{ form.submit(class="layui-btn", id="search") }}
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </form>
    <div id="remove">
        <table lay-even id="result" lay-filter="re">
            <thead>
            <tr>
                <th lay-data="{field:'isbn', width:200}">ISBN</th>
                <th lay-data="{field:'book_name', width:200}">书名</th>
                <th lay-data="{field:'press', width:180}">出版社</th>
                <th lay-data="{field:'author', width:140}">作者</th>
                <th lay-data="{field:'class_name', width:150}">类别</th>
                <th lay-data="{field:'available', width:150}">借阅费用</th>
                <th lay-data="{field:'available'}">借出者</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <table id="test" lay-filter="test"></table>

{% endblock %}

{% block script %}
    <script type="text/javascript">
        layui.use(['form', 'jquery'], function () {
            var form = layui.form;
            var $ = layui.$;

        });
        $(document).ready(function () {
            $("#borrowBtn").on('click', function () {
                window.location.href = "{{ url_for('book.new_interloan') }}";
            })
        });

        <!--表单信息-->
        layui.use(['form', 'table', 'jquery'], function () {
            var form = layui.form;
            var table = layui.table;
            var $ = layui.$;

            table.init('re', {
                height: 390
                , limit: 7
                , page: true
            });

            $(document).ready(function () {
                $('#search').on('click', function () {
                    var form = new FormData(document.getElementById("searchForm"));
                    if ($('#content').val() === "") {
                        layui.use('layer', function () {
                            var layer = layui.layer;

                            layer.msg('请填写查询内容', {time: 800});
                        });
                    } else {
                        $.ajax({
                            url: "{{ url_for('book.find_interloan_book') }}",
                            type: "post",
                            data: form,
                            processData: false,
                            contentType: false,
                            success: function (data) {
                                if (data.length !== 0) {
                                    $('#remove').remove();
                                    table.render({
                                        elem: '#test'
                                        , data: data
                                        , cols: [[
                                            {field: 'isbn', title: 'ISBN', width: 140, event: 'detail'}
                                            , {field: 'book_name', title: '书名', width: 200}
                                            , {field: 'press', title: '出版社', width: 180}
                                            , {field: 'author', title: '作者', width: 140}
                                            , {field: 'class_name', title: '类别', width: 150}
                                            , {field: 'fee', title: '借阅费用', width: 150}
                                            , {field: 'lender', title: '借出者'}
                                        ]]
                                        , page: true
                                        , height: 390
                                        , limit: 7
                                        , response: {
                                            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                                        }
                                        , parseData: function (data) { //将原始数据解析成 table 组件所规定的数据
                                            return {
                                                "code": data.status, //解析接口状态
                                                "msg": data.message, //解析提示文本
                                                "count": data.total, //解析数据长度
                                                "data": data.rows.item //解析数据列表
                                            };
                                        }
                                    });
                                    //监听表格行的单击事件
                                    // 监听表格行的单击事件
                                    table.on('row(test)', function (obj) {
                                        var data = obj.data;
                                        // 获取当前行的数据

                                        var html = '<div class="layui-card">\n' +
                                            '    <div class="layui-card-body">\n' +
                                            '        <ul class="layui-table-view">\n' +
                                            '            <li class="layui-table-view-cell">\n' +
                                            '                <div class="layui-table-view-cell-label">ISBN:</div>\n' +
                                            '                <div class="layui-table-view-cell-value">' + data.isbn + '</div>\n' +
                                            '            </li>\n' +
                                            '            <li class="layui-table-view-cell">\n' +
                                            '                <div class="layui-table-view-cell-label">书名:</div>\n' +
                                            '                <div class="layui-table-view-cell-value">' + data.book_name + '</div>\n' +
                                            '            </li>\n' +
                                            '            <li class="layui-table-view-cell">\n' +
                                            '                <div class="layui-table-view-cell-label">出版社:</div>\n' +
                                            '                <div class="layui-table-view-cell-value">' + data.press + '</div>\n' +
                                            '            </li>\n' +
                                            '            <li class="layui-table-view-cell">\n' +
                                            '                <div class="layui-table-view-cell-label">作者:</div>\n' +
                                            '                <div class="layui-table-view-cell-value">' + data.author + '</div>\n' +
                                            '            </li>\n' +
                                            '            <li class="layui-table-view-cell">\n' +
                                            '                <div class="layui-table-view-cell-label">类别:</div>\n' +
                                            '                <div class="layui-table-view-cell-value">' + data.class_name + '</div>\n' +
                                            '            </li>\n' +
                                            '            <li class="layui-table-view-cell">\n' +
                                            '                <div class="layui-table-view-cell-label">借阅费用:</div>\n' +
                                            '                <div class="layui-table-view-cell-value">' + data.fee + '</div>\n' +
                                            '            </li>\n' +
                                            '            <li class="layui-table-view-cell">\n' +
                                            '                <div class="layui-table-view-cell-label">借出者:</div>\n' +
                                            '                <div class="layui-table-view-cell-value">' + data.lender + '</div>\n' +
                                            '            </li>\n' +
                                            '        </ul>\n' +
                                            '    </div>\n' +
                                            '</div>';

                                        layer.open({
                                            type: 1,
                                            title: '书籍详情',
                                            area: ['500px', '480px'],
                                            resize: false,
                                            content: html,
                                            btn: ['借阅', '取消'],
                                            yes: function (index) {
                                                // 点击“借阅”按钮的回调函数
                                                layer.close(index);
                                                // TODO: 处理借阅逻辑

                                            },
                                            btn2: function (index) {
                                                // 点击“取消”按钮的回调函数
                                                layer.close(index);
                                            }
                                        });

                                    });
                                } else {
                                    layui.use('layer', function () {
                                        var layer = layui.layer;
                                        layer.msg('未找到任何结果', {time: 1000});
                                    });
                                }
                            }
                        });
                    }
                    return false;
                })
            });

        });
    </script>
{% endblock %}
